<script setup lang="ts">
import ImgPreview from '@/components/img-preview/index.vue';
import { ADD_TYPE_ENUM } from '@/const';
import type { BuildDetail, Current } from '@/types';
import { toRef } from 'vue';
import AddBuilding from './add-building.vue';
// import { useThemeToken } from '@/hooks';

// const token = useThemeToken();

const emit = defineEmits(['onSuccess'])
const props = defineProps<{
	data: BuildDetail
	current: Current
}>()

const addOk = () => {
	emit('onSuccess')
};


</script>

<template>
	<div v-for="(floor, index) in (props.data?.Floors || [])" :key="floor.ID">
		<h4 class="flex items-center mt0">
			{{ index + 1 }}楼（{{ floor.Name }}）
			<AddBuilding @add="addOk" :type="ADD_TYPE_ENUM.room"
				:current="toRef<any>({ ...props.current, floor: floor.ID })">
				<a-button type="primary" ghost class="border-none">
					+ 添加房间
				</a-button>
			</AddBuilding>
		</h4>
		<div class="flex flex-wrap">
			<a-card hoverable v-for="(room, index) in (floor.Rooms || [])" :key="index"
				class="max-w-[100%] mr20 mb20 bg-#ececec room">
				<template #title>
					<div class="text-center">{{ room.Name }}（{{ room.Beds?.length }} / {{ room.Beds?.length }}）
						<AddBuilding :data="{ id: room.ID, name: room.Name }" :type="ADD_TYPE_ENUM.room">
							<a-button type="primary" ghost class="border-none pos-absolute right-0 top-12">
								<span class="i-material-symbols-edit"></span>
							</a-button>
						</AddBuilding>
					</div>
				</template>
				<div class="flex flex-wrap">
					<div class="bed-item mr20 p10" v-for="(bed, index) in (room.Beds || [])" :key="index">
						<div v-if="bed.MemberID === 0" class="flex justify-center items-center h-[100%]">
							未入住
						</div>
						<template v-else>
							<ImgPreview :src="bed.Avatar" :height="90" />
							<div class="mt5">
								{{ index + 1 }}床 {{ bed.MemberName }}
								<!-- <span :style="`color: ${token.colorPrimary}`">{{ index + 1 }}床</span> {{ bed.MemberName }} -->
							</div>
							<div>照护等级：{{ bed.LevelName || '-' }}</div>
						</template>
					</div>
					<AddBuilding @add="addOk" :type="ADD_TYPE_ENUM.bed"
						:current="toRef<any>({ ...props.current, floor: floor.ID, room: room.ID })">
						<div class="bed-height flex items-center justify-center">
							<a-button type="primary" ghost class="border-none">+ 添加床位</a-button>
						</div>
					</AddBuilding>
				</div>
			</a-card>
		</div>
	</div>
</template>
<style lang="less" scoped>
.room {
	:deep(.ant-card-body) {
		padding-top: 0;
		padding-bottom: 0;
	}

	:deep(.ant-card-head) {
		border-bottom: unset;
	}
}
</style>
